<template>
    <div id="appByWhite" class="write">
        <h2 class="h2Class">写下小作文吧~</h2><span class="miaoshu">记录下你的心情，成长，快乐和值得记忆的瞬间吧~~</span>
        <el-row :gutter="10" style="margin: 0px;">
            <el-form label-width="100px" label-position="right" :rules="rule" ref="form" :model="formData">
                <el-form-item label="标题：" prop="title">
                    <el-input v-model="formData.title" placeholder="搞个标题呗"></el-input>
                </el-form-item>
                <el-form-item label="内容：" prop="content">
                    <quill-editor v-model="formData.content" ref="myQuillEditor" style="height: 500px;background: white;" :options="editorOption"></quill-editor>
                </el-form-item>
                <el-form-item label="你的名字：" prop="createOperator">
                    <el-input v-model="formData.createOperator" placeholder="Your Name"></el-input>
                </el-form-item>
            </el-form>
            <div style="width: 40%; margin: 0 auto;">
                <el-button style="width: 20%; color: white;" @click="encryptionSubmit" :loading="subing" type="primary">提交</el-button>
                <el-button style="width: 15%;" @click="reload">重置</el-button>
            </div>
        </el-row>
    </div>
</template>

<script>
import {writeBbsInfo} from "@/api/bbs"
import {
    quillEditor
} from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
    name: 'write',
    components: {
      quillEditor
    },
    data() {
        return {
            subing: false,
            formData: {
                title: '',
                content: '',
                createOperator: ''
            },
            rule: {
                title: [
                    { required: true, message: '请输入标题', trigger: 'blur' }
                ],
                content: [
                    { required: true, message: '请输入内容', trigger: 'blur' }
                ]
            },
            editorOption: {}
        }
    },
    created() {
        // this.$message.success("页面来了");
    },
    activated() {

    },
    methods: {
        encryptionSubmit() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    this.subing = true
                    // this.$message.success("content:" + this.content + "XXOO" + this.editorOption)
                    let param = {
                        title: this.formData.title,
                        content: this.formData.content,
                        createOperator: this.formData.createOperator
                    }
                    writeBbsInfo(param).then(res => {
                        console.log("res:", res)
                        this.subing = false
                        if (res.data.data == 1) {
                            this.$message.success("写入完成！即将跳转到首页")
                            const that = this
                            setTimeout(function(){
                                window.location.href='https://ljxnb.xin'
                            },1000)
                            that.$refs['form'].resetFields();
                        }
                    })
                }
            })
        },
        reload() {
            this.$refs['form'].resetFields();
        }
    }
}
</script>

<style scss="lang" scope>
.write {
    text-align: center;
    margin: 0 auto;
}
.ql-container{
    height: 442px;
}
.ql-editor{
    font-size: 17px;
}
.h2Class {
    margin: 0px;
    padding: 0px;
}
.miaoshu{
    font-size: 13px;
    color:darkblue;
}
</style>
